<template>
  <div class="margin-box">
    <div class="card-box">
      <div class="card-title">资料信息</div>
      <div class="batchImport-main">
        <div class="batchImport-steps">
          <el-steps :active="active" finish-status="success" align-center>
            <el-step title="第一步"></el-step>
            <el-step title="第二步"></el-step>
            <el-step title="第三步"></el-step>
          </el-steps>
          <div v-if="active === 0">
            <div class="step-first">
              <div class="el-icon-upload one ones"></div>
              <div class="step-first-text">
                <h2>填写导入的信息</h2>
                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                <el-button class="el-icon-download two" type="info" @click="handleDownTemplate">下载模板</el-button>
              </div>
            </div>
            <div class="step-first step-first-last">
              <div class="el-icon-upload one"></div>
              <div class="step-first-text">
                <h2>上传填好的物业管理导入表</h2>
                <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :limit="1"
                  action="/admin/sys-file/upLodeFileAdd"
                  :on-remove="handleRemove"
                  :on-change="file => {handleChange(file)}"
                  :auto-upload="false"
                >
                  <el-button class="el-icon-upload2 two" type="info">上传文件</el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <div v-if="active === 1">
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
              <el-tab-pane name="first">
                <span slot="label">
                  <h3 style="font-weight: 500;">总共添加（{{batchImportTableData.successfulSize}}）</h3>
                </span>
                <el-table :data="batchImportTableData.successfulData" align="center" ref="multipleTable">
                  <el-table-column label="序号" prop="excelRow"></el-table-column>
                  <el-table-column label="项目名称" prop="projectNameExcel"></el-table-column>
                  <el-table-column label="楼栋名称" prop="buildingNameExcel"></el-table-column>
                  <el-table-column label="物业名称" prop="propertyName"></el-table-column>
                  <el-table-column label="物业类型" prop="projectType">
                    <template slot-scope="scope">{{getCardTypeValue(scope.row.projectType,propertyTypes)}}</template>
                  </el-table-column>
                  <el-table-column label="物业用途" prop="projectSubclassType">
                    <template slot-scope="scope">{{getCardTypeValue(scope.row.projectSubclassType,propertyUseTypes)}}</template>
                  </el-table-column>
                  <el-table-column label="管理权属" prop="manageUnit">
                    <template slot-scope="scope">{{getCardTypeValue(scope.row.manageUnit,administrativeOffice)}}</template>
                  </el-table-column>
                  <el-table-column label="地址" prop="projectAddressExcel">
                    <template slot-scope="scope">{{scope.row.projectAddressExcel}}{{scope.row.address}}</template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="second">
                <span slot="label">
                  <h3 style="font-weight: 500;">异常情况（{{batchImportTableData.errorSize}}）</h3>
                </span>
                <div class="step-second">
                  <h3>异常提示：</h3>
                  <p v-for="(item,index) in batchImportTableData.errorData" :key="index">{{item}}</p>
                  <el-button class="step-second-btn" @click="handleDownError">导出异常数据</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div v-if="active === 2">
            <div class="step-third">
              <img :src="Smile" />
              <h2>批量导入完成</h2>
              <p>成功导入{{submitData}}条数据</p>
            </div>
          </div>
        </div>
        <div class="batchImport-btn">
          <el-button style="margin-top: 12px;" v-if="active == 1" @click="handleClickPrev">上一步</el-button>
          <el-button style="margin-top: 12px;" v-if="active == 0 || active == 1" @click="handleClicknext">下一步</el-button>
          <el-button style="margin-top: 12px;" v-if="active == 2" @click="handleClickSubmit">完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { doImport } from "../../api/room";
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import { getDict } from '~/utils'
export default {
  name: "batch-import",
  mixins: [BaseLoad],
  data () {
    return {
      // 步骤条默认选中
      active: 0,
      // tab默认选中
      activeName: 'first',
      // table数据存放
      batchImportTableData: {
        successfulData: [],
        errorData: [],
        errorSize: 0,
        successfulSize: 0
      },
      submitData: '',
      Smile: require('@/assets/images/Smile-icon.png'),
      // 文件上传
      propertyManagementBatchImport: '',
      url: '/api/roomimport/batch-import',
    }
  },
  computed: {
    propertyTypes () {
      return this.getDict('property_types')
    },
    propertyUseTypes () {
      return this.getDict('property_use_types')
    },
    administrativeOffice () {
      return this.getDict('administrative_office')
    },
  },
  methods: {
    // 上一步
    handleClickPrev () {
      this.$confirm('返回上一步数据将会丢失, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.active-- < 0) this.active = 0;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消上一步'
        })
      })
    },
    // 下一步
    handleClicknext () {
      let formData = new FormData();
      formData.append('file', this.propertyManagementBatchImport);
      if (this.active === 0) {
        if (this.propertyManagementBatchImport) {
          this.loadAction("请稍等...")
          this.http.post(this.url, formData).then(res => {
            if (res.data.code === 0) {
              this.loadClose()
              this.batchImportTableData = res.data.data
              this.active++
            } else {
              this.loadClose()
              this.$message.error('文件上传失败！')
              return
            }
          })
        } else {
          this.$message.error('请先上传文件！')
        }
      } else if ((this.active === 1)) {
        this.loadAction("保存中...")
        doImport().then(res => {
          if (res.data.code === 0) {
            this.loadClose()
            this.submitData = res.data.data
            this.active++
          } else {
            this.loadClose()
            this.$message.error('保存失败！')
            return
          }
        })
      } else {
        this.active++
      }
    },
    // 完成
    handleClickSubmit () {
      //关闭当前新增页，暂时没找到好办法
      this.$store.commit("delHistoryRoute", this.$route.fullPath);
      // this.$parent.$children[2].closeTab('current')
      //跳转
      this.$router.push("/property-info-sys/property-manage");
    },
    // tab选中事件
    handleTabClick (tab, event) {
      // console.log(tab, event);
    },
    //文件移除
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    // 下载模板
    handleDownTemplate () {
      const { origin, pathname } = window.location;
      window.location.href = `${origin}/${pathname.split("/")[1]
        }/propertyManagementBatchImport.xlsx`;
    },
    // 文件上传前的钩子
    handleChange (file) {
      this.propertyManagementBatchImport = file.raw
    },
    // 导出异常数据
    handleDownError () {
      this.publicExport('异常数据', '/api/roomimport/downError', this.filter)
    },
    //对应value取label
    getCardTypeValue (num, sum) {
      let arr = sum.filter(e => e.value === num)
      if (arr.length > 0) {
        return arr[0].label
      } else {
        return num
      }
    },
  }
}
</script>

<style scoped lang="scss">
.margin-box {
  .card-box {
    min-height: 720px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.07);
    .batchImport-main {
      padding: 20px;
      position: relative;
      height: 100%;
      .batchImport-steps {
        padding: 30px 80px;
        min-height: 550px;
        /deep/ .el-step__icon.is-text {
          width: 60px;
          height: 60px;
          cursor: pointer;
        }
        /deep/ .el-step__icon {
          top: -20px;
        }
        /deep/ .el-step__title {
          line-height: 0px;
          margin-bottom: 40px;
        }
        .step-first {
          width: 100%;
          height: 170px;
          box-sizing: border-box;
          border: 1px solid #eaeaea;
          margin-top: 20px;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          .one {
            font-size: 90px;
            line-height: 180px;
            color: #666666;
          }
          .ones {
            transform: rotate(180deg);
          }
          .step-first-text {
            h2 {
              margin: 20px 0;
              color: #666666;
            }
            p {
              font-size: 16px;
              margin: 20px 0;
              color: #788394;
            }
            .two {
              background-color: #f4f4f4;
              color: #455a64;
            }
          }
        }
        .step-first-last {
          height: 200px;
        }
        .step-second {
          position: relative;
          h3 {
            font-weight: 500;
            color: #e33545;
            line-height: 40px;
          }
          p {
            color: #e33545;
            line-height: 30px;
          }
          .step-second-btn {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .step-third {
          width: 200px;
          height: 200px;
          margin: 100px auto 0;
          img {
            width: 100px;
            height: 100px;
            margin-left: 10px;
          }
          h2 {
            margin: 20px 0;
          }
        }
      }
      .batchImport-btn {
        position: absolute;
        button: 0;
        right: 20px;
      }
    }
  }
}
</style>
